<template>
	<view>
		<view class="coupons_box z-padding-32 z-radius-24 z-margin-b-32">
			<view class="coupons_box_top">
				<view class="coupons_box_top_left">
					<view>{{ info.reduce }}元代金券</view>
					<view class="text_999 z-font-24 z-margin-t-24" v-if="type == 2">{{ tool.formatTime(info.exittime) }}到期</view>
					<view class="text_999 z-font-24 z-margin-t-24" v-else>领取后{{ info.effective_day }}天内有效</view>
				</view>
				<view class="coupons_box_top_left">
					<view class="money z-font-w">
						<view>￥</view>
						<view class="money_text">{{ info.reduce }}</view>
					</view>
					<view class="text_999 z-font-24 z-margin-t-8">满{{ info.achieve }}可用</view>
				</view>
			</view>
			<!-- <u-divider /> -->
			<u-divider text=""></u-divider>
			<view class="coupons_box_top">
				<view class="green z-font-28" v-if="info.goods_id > 0">{{ info.shopName || '' }}{{ info.goodsName }}专用券</view>
				<view class="green z-font-28" v-else>{{ info.shopName || '' }}通用券</view>
				<view
					class="coupon-btn z-flex z-font-24 z-radius-4 use"
					v-if="goods && info.shop_id && info.type === 3 && goods.shop_id == info.shop_id && goods.goods_id == info.goods_id && goods.money >= info.achieve"
					@click="couponTap"
				>
					立即使用
				</view>
				
				<view
					class="coupon-btn z-flex z-font-24 z-radius-4 use"
					v-else-if="goods && info.shop_id && info.type === 2 && goods.shop_id == info.shop_id && goods.money >= info.achieve"
					@click="couponTap"
				>
					立即使用
				</view>
				
				<view class="coupon-btn z-flex z-font-24 z-radius-4 use" v-else-if="goods && !info.shop_id && info.type === 0 && goods.money >= info.achieve" @click="couponTap">
					立即使用
				</view>
				
				<view
					class="coupon-btn z-flex z-font-24 z-radius-4 use"
					v-else-if="goods && !info.shop_id && info.type === 1 && goods.goods_id == info.goods_id && goods.money >= info.achieve"
					@click="couponTap"
				>
					立即使用
				</view>
				
				<view class="z-flex z-font-24 z-radius-4 text_999" v-else-if="goods">不可使用</view>
				<view class="coupon-btn z-flex z-font-24 z-radius-4 use" v-else-if="info.userState == 1" @click="couponTap(2)">已领取</view>
				<view class="coupon-btn z-flex z-font-24 z-radius-4 use" v-else-if="info.state === 0" @click="couponTap(2)">立即使用</view>
				<view class="z-flex z-font-24 z-radius-4 text_999" v-else-if="info.state === 1">已使用</view>
				<view class="z-flex z-font-24 z-radius-4 text_999" v-else-if="info.state === -1">已过期</view>
				<view class="coupon-btn z-flex z-font-24 z-radius-4" v-else @click="couponTap(1)">立即领取</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	props: ['type', 'info', 'goods'], //type 1领取 2使用
	data() {
		return {};
	},
	methods: {
		couponTap(e) {
			this.$emit('couponTap', { info: this.info, type: e })
			// this.triggerEvent('couponTap', { info: this.data.info, type: e.currentTarget.dataset.type });
		}
	}
};
</script>

<style lang="scss">
.coupons_box {
	background-color: #fff;
	box-sizing: border-box;
}
.coupons_box_top {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.coupons_box_top_left {
	display: flex;
	flex-direction: column;
}
.money {
	display: flex;
	color: $uni-mainmoneycolor;
	align-items: center;
}
.money_text {
	font-size: 50rpx;
}

.green {
	color: #62cb81;
}
.coupon-btn {
	width: 136rpx;
	height: 56rpx;
	color: #fff;
	background: #62cb81;
}
.use {
	background: rgba(98, 203, 129, 0.1);
	color: #62cb81;
}
</style>
